<template>
	<div class="trend">
		<div class="text" :style="{ color: textColor }">
			<slot v-if="slots.default"></slot>
			<div v-else>{{text}}</div>
		</div>
		<div class="icon">
			<component :is="`el-icon-${toLine(upIcon)}`" :style="{ color: !reverseColor ? upIconColor : '#52c41a' }"
				v-if="type === 'up'"></component>
			<component :is="`el-icon-${toLine(downIcon)}`" :style="{ color: !reverseColor ? downIconColor : '#f5222d' }"
				v-else></component>
		</div>
	</div>
</template>

<script lang="ts" setup name="trend">
	import {
		toLine
	} from '@/utils/main.ts'

	import {
		useSlots,
		computed
	} from 'vue'

	let props = defineProps({
		type: {
			type: String,
			default: 'up'
		},

		text: {
			type: String,
			default: ''
		},

		upIconColor: {
			type: String,
			default: '#f5222d'
		},

		downIconColor: {
			type: String,
			default: '#52c41a',
		},

		downTextColor: {
			type: String,
			default: '#000'
		},

		upTextColor: {
			type: String,
			default: '#000'
		},


		// 只能在使用默认颜色情况下生效
		reverseColor: {
			type: Boolean,
			default: false
		},

		upIcon: {
			type: String,
			default: 'ArrowUp'
		},

		downIcon: {
			type: String,
			default: 'ArrowDown'
		}
	})

	let slots = useSlots()

	let textColor = computed(() => {
		return props.type === 'up' ? props.upTextColor : props.downTextColor
	})
</script>

<style lang="scss" scoped>
	.trend {
		display: flex;
		align-items: center;

		.text {
			font-size: 12px;
			margin-right: 4px;
		}

		svg {
			width: 0.8em;
			height: 0.8em;
		}
	}
</style>
